<template>
  <div class="home">
    <el-form
      :model="beanForm"
      ref="beanForm"
      label-width="160px"
      style="margin: 20px 50px 20px 0px;"
      size="mini">
      <el-row>
        <!--账户类型-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="账户类型"
            :label-width="formLabelWidth"
            prop="account_type"
            :rules="rules.account_type"
          >
            <el-select
              v-model="beanForm.account_type"
              placeholder="请选择账户类型"
              filterable
              clearable
              @change="account_type_change"
            >
              <el-option
                v-for="(value,key,index) in dict.account_type"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--账户子类型-->
        <!-- v-show会自动校验 -->
        <el-col :span="8" v-if="account_subtype_show">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            :label="account_subtype_title"
            :label-width="formLabelWidth"
            prop="account_subtype"
            :rules="rules.account_subtype"
          >
            <el-select
              v-model="beanForm.account_subtype"
              placeholder="请选择账户子类型"
              filterable
              clearable
              @change="account_subtype_change"
            >
              <el-option
                v-for="(value,key,index) in dict.account_subtype"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--资金账号-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="资金账号"
            :label-width="formLabelWidth"
            prop="account_code"
            :rules="rules.account_code"
          >
            <el-select
              v-model="beanForm.account_code"
              placeholder="请选择资金账号"
              filterable
              clearable
              @change="account_code_change"
            >
              <el-option
                v-for="item in dict.account_code"
                :key="item.tcode"
                :label="item.text"
                :value="item.tcode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--资金账户名称-->
        <el-col :span="8">
          <el-form-item
            label="资金账户名称"
            :label-width="formLabelWidth"
            prop="account_name"
            :rules="rules.account_name"
          >
            <el-input v-model="beanForm.account_name" disabled />
          </el-form-item>
        </el-col>
        <!--开户行名称-->
        <el-col :span="8">
          <el-form-item
            label="开户行名称"
            :label-width="formLabelWidth"
            prop="opening_account_name"
            :rules="rules.opening_account_name"
          >
            <el-input v-model="beanForm.opening_account_name" disabled />
          </el-form-item>
        </el-col>
        <!--开户行行号-->
        <el-col :span="8">
          <el-form-item
            label="开户行行号"
            :label-width="formLabelWidth"
            prop="opening_account_num"
            :rules="rules.opening_account_num"
          >
            <el-input v-model="beanForm.opening_account_num" disabled />
          </el-form-item>
        </el-col>
        <!--活期利率(%)-->
        <el-col :span="8">
          <el-form-item
            label="活期利率(%)"
            :label-width="formLabelWidth"
            prop="demand_rate"
            :rules="rules.demand_rate"
          >
            <el-input v-model="beanForm.demand_rate" />
          </el-form-item>
        </el-col>
        <!--生效日期-->
        <el-col :span="8">
          <el-form-item
            label="生效日期"
            :label-width="formLabelWidth"
            prop="effec_date"
            :rules="rules.effec_date"
          >
            <el-date-picker
              v-model="beanForm.effec_date"
              type="date"
              class="venus-input-middle venus-input-date"
              value-format="yyyyMMdd"
              placeholder="请输入起始日期"
            />
          </el-form-item>
        </el-col>
        <!--计息基数-->
        <el-col :span="8">
          <el-form-item
            label="计息基数"
            :label-width="formLabelWidth"
            prop="base_day"
            :rules="rules.base_day"
          >
            <el-select
              v-model="beanForm.base_day"
              placeholder="请选择计息基数"
              filterable
              clearable
            >
              <el-option
                v-for="(value,key,index) in dict.base_day"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--备注-->
        <el-col :span="8">
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="note"
            :rules="rules.note"
          >
            <el-input v-model="beanForm.note" />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align:center">
        <el-button type="success" @click="submitForm('beanForm')">提交</el-button>
        <el-button type="info" plain @click="resetForm('beanForm')">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import * as kk from '../../../../../utils/k-utils'

  export default {
    name: 'M8CurrentRateAdd',
    data() {
      return {
        dict: {
          account_type: {}, // 账户类型
          account_subtype: [], // 账号子类型
          account_code: [], // 资金账号
          base_day: {} // 计息基数
        },
        formLabelWidth: '180px',
        beanForm: {
          id: '', // 主键
          account_type: '', // 账户类型
          account_subtype: '', // 账户子类型
          account_code: '', // 资金账号
          account_name: '', // 资金账户名称
          opening_account_name: '', // 开户行名称
          opening_account_num: '', // 开户行行号
          demand_rate: '', // 活期利率(%)
          effec_date: '', // 利率生效日
          base_day: '', // 计息基数
          note: '' // 备注
        },
        account_subtype_show: false, // 账号子类型是否显示
        account_subtype_title: '账号子类型', // 账号子类型标签描述
        rules: {
          account_type: [
            { required: true, message: '请选择账户类型', trigger: 'change' }
          ],
          account_subtype: [
            { required: true, message: '请选择账户子类型', trigger: 'change' }
          ],
          account_code: [
            { required: true, message: '请选择资金账号', trigger: 'change' }
          ],
          account_name: [
            { required: true, message: '请输入资金账户名称', trigger: 'blur' }
          ],
          opening_account_name: [
            { required: true, message: '请输入开户行名称', trigger: 'blur' }
          ],
          demand_rate: [
            { required: true, message: '请输入活期利率(%)', trigger: 'blur' }
          ],
          effec_date: [
            { required: true, message: '请选择利率生效日', trigger: 'change' }
          ],
          base_day: [
            { required: true, message: '请选择计息基数', trigger: 'change' }
          ]
        }
      }
    },
    // el对象被添加就触发
    mounted() {
      // 初始化调用
      this.init()
    },
    // 每次打开页面调用，在mounted之后调用
    beforeRouteEnter(to, from, next) {
      // 这里还无法访问到组件实例，this === undefined
      next(vm => {
        // 通过 `vm` 访问组件实例
        // 重置页面数据
        vm.$refs['beanForm'].resetFields()
      })
    },
    methods: {
      init() {
        /* 加载字典 */
        // 账户类型
        kk.k_load_dict(this, 'account_type', 'update_type')
        // 计息基数
        kk.k_load_dict(this, 'base_day', 't8_demand_base_day')
      },
      // 账户类型改变
      account_type_change(val) {
        // 清空部分数据
        this.fitAccountStyle()
        if (typeof val === 'undefined' || val == null || val === '') {
          this.account_subtype_show = false// 账号子类型是否显示
        }
        var _this = this
        // 1托管行账户 3交易所账户 4其他账户 5行内账户 2银行间(这里没有2)
        if (val === '1') {
          this.account_subtype_show = false// 账号子类型是否显示
          this.beanForm.account_subtype = ''// 账户子类型
          // 资金账号
          kk.k_load_exeid('clearing', 'queryClearAccount', { account_type: val }).then(rep => {
            for (var i = 0; i < rep.rows.length; i++) {
              _this['dict']['account_code'] = rep.rows
            }
          })
        } else {
          this.account_subtype_show = true// 账号子类型是否显示
          var dict = ''
          if (val === '2') {
            dict = 't8_trustee_ship'
            this.account_subtype_title = '托管场所'
          } else if (val === '3') {
            dict = 't8_exchange_place'
            this.account_subtype_title = '交易场所'
          } else if (val === '4') {
            dict = 't8_other_type'
            this.account_subtype_title = '资金类型'
          } else if (val === '5') {
            dict = 't8_inbank_type'
            this.account_subtype_title = '资金类型'
          }
          // 账户子类型
          kk.k_load_dict(this, 'account_subtype', dict).then(rep => {
            for (var i = 0; i < rep.rows.length; i++) {
              _this['dict']['account_code'] = rep.rows
            }
          })
        }
      },
      // 设置样式，并且重新加载子类型，让数据字典生效
      fitAccountStyle() {
        this.beanForm.account_subtype = ''// 账户子类型
        this.beanForm.account_code = ''// 资金账号
        this.beanForm.account_name = ''// 资金账户名称
        this.beanForm.opening_account_name = ''// 开户行名称
        this.beanForm.opening_account_num = ''// 开户行行号
      },
      // 当重新选择的时候，需要重置下面列表的值
      afterSelectDeal() {
        this.beanForm.account_code = ''// 资金账号
        this.beanForm.account_name = ''// 资金账户名称
        this.beanForm.opening_account_name = ''// 开户行名称
        this.beanForm.opening_account_num = ''// 开户行行号
      },
      // 清除资金账号以外的其他账号信息
      clear_account_code_other() {
        this.beanForm.account_name = ''// 资金账户名称
        this.beanForm.opening_account_name = ''// 开户行名称
        this.beanForm.opening_account_num = ''// 开户行行号
      },
      // 账户子类型改变
      account_subtype_change(val) {
        // 清空部分数据
        this.afterSelectDeal()
        var _this = this
        // 根据账户类型和账户子类型查询其下的资金账号
        var params = {
          account_type: this.beanForm.account_type,
          account_subtype: val
        }
        // 资金账号
        kk.k_load_exeid('clearing', 'queryClearAccount', params).then(rep => {
          for (var i = 0; i < rep.rows.length; i++) {
            _this['dict']['account_code'] = rep.rows
          }
        })
      },
      // 资金账号
      account_code_change(val) {
        // 清除数据
        this.clear_account_code_other()
        var _this = this
        // 加载资金账号详细信息
        kk.k_load_exeid('clearing', 'queryInfoByClearAccount', { account_code: val }).then(rep => {
          if (rep.rows.length > 0) {
            _this.beanForm.account_name = rep.rows[0].account_name// 资金账户名称
            _this.beanForm.opening_account_name = rep.rows[0].opening_account_name// 开户行名称
            _this.beanForm.opening_account_num = rep.rows[0].opening_account_num// 开户行行号
          } else {
            _this.$message('没有加载到资金账号详细信息')
          }
        })
      },
      // ======================提交重置========================
      // 提交
      submitForm(formName) {
        var _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.submitOk(formName)
          } else {
            console.log('error submit!!')
          }
        })
      },
      // 发送提交请求
      submitOk(formName) {
        kk.k_update_exeid('clearing', 'addCurrentRate', this.beanForm)
        // 关闭当前路由页面并且返回前一个页面
        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        this.$router.go(-1)
      },
      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .home {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
